<template>
    <div shadow="hover">
        <div ref="echarts1" style="height: 250px;width: 350px;"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
data() {
    return {}
},
mounted() {
    const echarts1 = echarts.init(this.$refs.echarts1)
    var option = {
        title: {
            text: '当前时间在线人数',
            textStyle:{
                color:'#ccc',//统计图标题的文字颜色
                fontSize: 15,
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            textStyle: {//图例文字的样式设置
                fontSize: 14,
                color: '#ade3ff'
            },
            data: [
                // '广州西门子变压器公司',
                 'web前端', '后端', '客户端', '其他'],
                 top: 20
        },
        grid: {
            left: '3',
            bottom: '10',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            splitLine: {
                show: false,
            },
            axisLine: {
                show: true,
                lineStyle: {    
                    color: '#56a4cd',
                },
            },
            data: ['06:00:00', '08:00:00', '10:00:00', '12:00:00', '13:00:00', '15:00:00', '19:00:00', '21:00:00', '23:00:00']
        },
        yAxis: {
            axisTick: {
                show: false,
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#56a4cd',
                },
            },
            type: 'value'
        },
        series: [
            // {
            // name: '广州西门子变压器公司',
            // type: 'line',
            // // stack: 'Total',
            // data: [130, 105, 135, 120, 175, 205, 185, 195, 208],
            // smooth: true,
            // },
            {
            name: 'web前端',
            type: 'line',
            // stack: 'Total',
            data: [2225, 2252, 1860, 6234, 2044, 1980, 1570, 2260, 4231],
            smooth: true,
            },
            {
            name: '后端',
            type: 'line',
            // stack: 'Total',
            data: [1580, 2630, 2041, 1650, 2930, 2330, 2140, 1210, 2430],
            smooth: true,
            },
            {
            name: '客户端',
            type: 'line',
            // stack: 'Total',
            data: [1380, 3175, 5201, 2210, 2020, 1422, 2105, 2355, 4248],
            smooth: true,
            },
            {
            name: '其他',
            type: 'line',
            // stack: 'Total',
            data: [2355, 2540, 4238, 2252, 2160, 1245, 1235, 3235, 2130],
            smooth: true,
            }
        ]
        };
    echarts1.setOption(option)
}
};
</script>
<style scoped>

</style>